<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header>div a{
            text-decoration: none;
            color: black;
            font-size: 12px;
        }
        footer a{
            font-size: 25px;
            margin: 10px 50px 15px 50px;
            color: black;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width: 1160px;background-color: white; margin: 0 auto;">
                <el-row style="height: 50px;background-color:#ffe4c4;margin: 0 auto">
                    <el-col :span="24"><div class="grid-content bg-purple-dark">
                        <div style="float: right;font-size: 12px; position: relative;top:18px ;margin-right: 15px;">
                            <a href="">登录</a><el-divider direction="vertical"></el-divider>
                            <a href="">注册</a><el-divider direction="vertical"></el-divider>
                            <a href="" class="el-icon-shopping-cart-2">购物车</a>
                        </div>
                    </div>
                    </el-col>
                </el-row>
                <div style="font-size: 25px;margin-top: 8px">
                    <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="white"
                            text-color="black">
                        <img src="pictures/logo.jpg" style="float: left; width: 120px;height: 80px;vertical-align: baseline" alt="">
                        <el-submenu index="1" style="margin-top: 10px">
                            <template slot="title">书籍分类</template>
                            <el-menu-item index="1-1">摄影</el-menu-item>
                            <el-menu-item index="1-2">政治军事</el-menu-item>
                            <el-menu-item index="1-3">儿童读物</el-menu-item>
                            <el-menu-item index="1-4">科普读物</el-menu-item>
                            <el-menu-item index="1-5">励志与成功</el-menu-item>
                            <el-menu-item index="1-6">金融与投资</el-menu-item>
                            <el-menu-item index="1-7">电子与通信</el-menu-item>
                            <el-menu-item index="1-8">科学与自然</el-menu-item>
                            <el-menu-item index="1-9">美食与烹饪</el-menu-item>
                            <el-menu-item index="1-10">运动与健身</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="2" style="margin-top: 10px">处理中心</el-menu-item>
                        <el-menu-item index="3"style="margin-top: 10px">消息中心</el-menu-item>
                        <el-menu-item index="4"style="margin-top: 10px"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
                <div style="float: right;position: relative;top:20px">
                    <el-input placeholder="请输入搜素内容" v-model="wd">
                        <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                    </el-input>
                    </div>
                    </el-menu>
                </div>
            </div>
        </el-header>
        <el-main style="width: 1160px;margin: 0 auto;">
            <el-row gutter="20">
                <el-col span="12">
                    <el-carousel height="450px">
                        <el-carousel-item>
                            <img src="pictures/a1.jpg" width="100%" height="100%" alt="">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="pictures/a1.jpg" width="100%" height="100%" alt="">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="pictures/a1.jpg" width="100%" height="100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
                <el-col  span="12">
                    <p style="font-size: 25px">{{"标题!!!!!!!!!"}}</p>
                    <p style="font-size: 15px">上架时间:{{"插入时间"}}</p>
                    <p style="font-size: 15px"> 销 量 :{{"插入销量"}}</p>
                    <p style="font-size: 15px">商品类别:{{"插入类别"}}</p>
                    <el-divider></el-divider>
                    <div style="height: 80px;width: 200px;background-color: darkorange;text-align: center">
                        <span style="line-height: 75px;font-size: 30px;color: white">￥{{"插入价格"}}</span>
                    </div>
                    <p style="font-size: 12px;color: #424242">服务支持:产品支持7天无理由退货</p>
                    <el-divider></el-divider>
                    <span style="line-height: 40px;">
                        <el-button type="success">
                        <a class="el-icon-shopping-bag-2" style="text-decoration: none;width: 100px;" href="">
                            购买
                        </a></el-button>
                    </span>
                    <span style="margin: 0 20px">
                         <el-button type="danger">
                        <a class="el-icon-shopping-cart-2" style="text-decoration: none;width: 100px;" href="">
                            加入购物车</a></el-button>
                    </span>
                </el-col>
            </el-row>
        </el-main>
        <el-footer style="width: 1160px;height: 100px; margin-left: 260px;">
            <div style="height: 50px;">
                <a href="" class="">七天无理由退货</a><el-divider direction="vertical"></el-divider>
                <a href="" class="">15天免费换货</a><el-divider direction="vertical"></el-divider>
                <a href="" class="el-icon-s-custom">售后服务</a><el-divider direction="vertical"></el-divider>
                <a href="" class="el-icon-truck">69包邮到家</a><el-divider direction="vertical"></el-divider>
            </div>
            <div style="background-color: #3f3f3f;width: 1160px;font-size: 12px;padding: 10px 0px; text-align: center;color: #b1b1b1;">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                wd: "",
                activeIndex: '1',
            }
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>